/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

.root {
    --spectrum-picker-button-height: var(--spectrum-component-height-100);
    --spectrum-picker-button-width: var(--spectrum-component-height-100);
    --spectrum-picker-button-gap: var(--spectrum-text-to-visual-50);
    --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-50);
    --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-100);
    --spectrum-picker-button-icon-color: var(--spectrum-neutral-content-color-default);
    --spectrum-picker-button-icon-color-hover: var(--spectrum-neutral-content-color-hover);
    --spectrum-picker-button-icon-color-down: var(--spectrum-neutral-content-color-down);
    --spectrum-picker-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
    --spectrum-picker-button-font-color: var(--spectrum-neutral-content-color-default);
    --spectrum-picker-button-font-color-hover: var(--spectrum-neutral-content-color-hover);
    --spectrum-picker-button-font-color-down: var(--spectrum-neutral-content-color-down);
    --spectrum-picker-button-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
    --spectrum-picker-button-font-family: var(--spectrum-sans-font-family-stack);
    --spectrum-picker-button-font-style: var(--spectrum-default-font-style);
    --spectrum-picker-button-font-weight: var(--spectrum-body-sans-serif-font-weight);
    --spectrum-picker-button-font-size: var(--spectrum-font-size-100);
    --spectrum-picker-button-border-radius-rounded: var(--spectrum-corner-radius-200);
    --spectrum-picker-button-background-animation-duration: var(--spectrum-animation-duration-100);
}

@media (hover: hover) {
    .root:hover {
        --mod-picker-button-background-color: var(--mod-picker-button-background-color-hover, var(--spectrum-picker-button-background-color-hover));
        --mod-picker-button-font-color: var(--mod-picker-button-font-color-hover, var(--spectrum-picker-button-font-color-hover));
        --mod-picker-button-icon-color: var(--mod-picker-button-icon-color-hover, var(--spectrum-picker-button-icon-color-hover));
    }
}

:host([open]) .root,
:host(:is(:active, [active])) .root {
    --mod-picker-button-background-color: var(--mod-picker-button-background-color-down, var(--spectrum-picker-button-background-color-down));
    --mod-picker-button-font-color: var(--mod-picker-button-font-color-down, var(--spectrum-picker-button-font-color-down));
    --mod-picker-button-icon-color: var(--mod-picker-button-icon-color-down, var(--spectrum-picker-button-icon-color-down));
}

:host([focused]) .root,
.root.is-keyboardFocused,
.root:focus,
.root:focus-visible {
    --mod-picker-button-background-color: var(--mod-picker-button-background-color-key-focus, var(--spectrum-picker-button-background-color-key-focus));
    --mod-picker-button-font-color: var(--mod-picker-button-font-color-key-focus, var(--spectrum-picker-button-font-color-key-focus));
    --mod-picker-button-icon-color: var(--mod-picker-button-icon-color-key-focus, var(--spectrum-picker-button-icon-color-key-focus));
}

:host([disabled]) .root {
    --mod-picker-button-background-color: var(--mod-picker-button-background-color-disabled, var(--spectrum-disabled-background-color));
    --mod-picker-button-background-color-hover: var(--mod-picker-button-background-color-hover-disabled, var(--spectrum-disabled-background-color));
    --mod-picker-button-background-color-down: var(--mod-picker-button-background-color-down-disabled, var(--spectrum-disabled-background-color));
    --mod-picker-button-border-color: var(--mod-picker-button-border-color-disabled, var(--spectrum-disabled-background-color));
    --mod-picker-button-font-color: var(--mod-picker-button-font-color-disabled, var(--spectrum-disabled-content-color));
    --mod-picker-button-font-color-hover: var(--mod-picker-button-font-color-hover-disabled, var(--spectrum-disabled-content-color));
    --mod-picker-button-font-color-down: var(--mod-picker-button-font-color-down-disabled, var(--spectrum-disabled-content-color));
    --mod-picker-button-icon-color: var(--mod-picker-button-icon-color-disabled, var(--spectrum-disabled-content-color));
    --mod-picker-button-icon-color-hover: var(--mod-picker-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color));
    --mod-picker-button-icon-color-down: var(--mod-picker-button-icon-color-down-disabled, var(--spectrum-disabled-content-color));
}

:host([quiet]) .root {
    --mod-picker-button-background-color: var(--mod-picker-button-background-color-quiet, transparent);
    --mod-picker-button-background-color-hover: var(--mod-picker-button-background-color-hover-quiet, transparent);
    --mod-picker-button-background-color-down: var(--mod-picker-button-background-color-down-quiet, transparent);
    --mod-picker-button-background-color-key-focus: var(--mod-picker-button-background-color-key-focus-quiet, transparent);
    --mod-picker-button-border-color: var(--mod-picker-button-border-color-quiet, transparent);
}

:host([size="s"]) .root {
    --spectrum-picker-button-height: var(--spectrum-component-height-75);
    --spectrum-picker-button-width: var(--spectrum-component-height-75);
    --spectrum-picker-button-label-padding: var(--spectrum-spacing-75);
    --spectrum-picker-button-font-size: var(--spectrum-font-size-75);
    --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-75);
}

:host([size="l"]) .root {
    --spectrum-picker-button-height: var(--spectrum-component-height-200);
    --spectrum-picker-button-width: var(--spectrum-component-height-200);
    --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-200);
    --spectrum-picker-button-font-size: var(--spectrum-font-size-200);
    --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-200);
}

:host([size="xl"]) .root {
    --spectrum-picker-button-height: var(--spectrum-component-height-300);
    --spectrum-picker-button-width: var(--spectrum-component-height-300);
    --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-300);
    --spectrum-picker-button-font-size: var(--spectrum-font-size-300);
    --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-300);
}

.root {
    background-color: initial;
    block-size: var(--mod-picker-button-width, var(--spectrum-picker-button-width));
    box-sizing: border-box;
    padding: var(--mod-picker-button-padding, var(--spectrum-picker-button-padding));
    border-style: none;
    justify-content: center;
    align-items: center;
    display: flex;
}

.root.uiicononly {
    inline-size: var(--mod-picker-button-height, var(--spectrum-picker-button-height));
}

.spectrum-PickerButton-label {
    color: var(--mod-picker-button-font-color, var(--spectrum-picker-button-font-color));
    white-space: nowrap;
    font-family: var(--mod-picker-button-font-family, var(--spectrum-picker-button-font-family));
    font-style: var(--mod-picker-button-font-style, var(--spectrum-picker-button-font-style));
    font-weight: var(--mod-picker-button-font-weight, var(--spectrum-picker-button-font-weight));
    font-size: var(--mod-picker-button-font-size, var(--spectrum-picker-button-font-size));
    flex: auto;
    padding-block-start: var(--mod-picker-button-label-padding, var(--spectrum-picker-button-label-padding));
    padding-block-end: var(--mod-picker-button-label-padding, var(--spectrum-picker-button-label-padding));
    overflow: hidden;
}

.uiicononly .spectrum-PickerButton-label {
    display: none;
}

.spectrum-PickerButton-fill {
    box-sizing: border-box;
    block-size: 100%;
    inline-size: 100%;
    justify-content: center;
    align-items: center;
    gap: var(--mod-picker-button-gap, var(--spectrum-picker-button-gap));
    background-color: var(--mod-picker-button-background-color, var(--spectrum-picker-button-background-color));
    border-color: var(--mod-picker-button-border-color, var(--spectrum-picker-button-border-color));
    border-width: var(--mod-picker-button-border-width, var(--spectrum-picker-button-border-width));
    padding: calc(var(--mod-picker-button-fill-padding, var(--spectrum-picker-button-fill-padding)) - var(--mod-picker-button-padding, var(--spectrum-picker-button-padding)) - var(--mod-picker-button-border-width, var(--spectrum-picker-button-border-width)));
    transition: border-color var(--mod-picker-button-background-animation-duration, var(--spectrum-picker-button-background-animation-duration)) ease-in-out;
    border-style: solid;
    border-start-start-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius));
    border-start-end-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius));
    border-end-end-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius));
    border-end-start-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius));
    display: flex;
}

:host([position="right"]) .spectrum-PickerButton-fill {
    border-start-start-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided));
    border-end-start-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided));
}

:host([position="right"][rounded]) .spectrum-PickerButton-fill {
    border-start-start-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided));
    border-end-start-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided));
}

:host([position="left"]) .spectrum-PickerButton-fill {
    border-start-end-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided));
    border-end-end-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided));
}

:host([position="left"][rounded]) .spectrum-PickerButton-fill {
    border-start-end-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided));
    border-end-end-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided));
}

:host([rounded]) .spectrum-PickerButton-fill {
    border-start-start-radius: var(--mod-picker-button-border-radius-rounded, var(--spectrum-picker-button-border-radius-rounded));
    border-start-end-radius: var(--mod-picker-button-border-radius-rounded, var(--spectrum-picker-button-border-radius-rounded));
    border-end-end-radius: var(--mod-picker-button-border-radius-rounded, var(--spectrum-picker-button-border-radius-rounded));
    border-end-start-radius: var(--mod-picker-button-border-radius-rounded, var(--spectrum-picker-button-border-radius-rounded));
}

.uiicononly .spectrum-PickerButton-fill {
    padding: 0;
}

.textuiicon .spectrum-PickerButton-fill {
    inline-size: auto;
}

.spectrum-PickerButton-icon {
    color: var(--mod-picker-button-icon-color, var(--spectrum-picker-button-icon-color));
    flex-shrink: 0;
}
